<!--
 * @Author: your name
 * @Date: 2021-03-16 09:13:17
 * @LastEditTime: 2021-03-16 21:04:41
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \xu\shop_manager\shop_vue\src\components\goods\List.vue
-->
<template>
   <div>
     <!-- 面包屑导航区 -->
     <el-breadcrumb separator-class="el-icon-arrow-right">
       <el-breadcrumb-item :to="{path: '/home'}">首页</el-breadcrumb-item>
       <el-breadcrumb-item>商品管理</el-breadcrumb-item>
       <el-breadcrumb-item>商品列表</el-breadcrumb-item>
     </el-breadcrumb>
     <!-- 卡片视图区域 -->
     <el-card>
       <el-row>
         <el-col :span="8">
           <el-input palceholder="请输入内容" v-model="queryInfo.query" clearable @clear="getGoodsList"></el-input>
           <el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>
         </el-col>
         <el-col :span="4">
           <el-button type="primary" @click="addGood">添加商品</el-button>
         </el-col>
       </el-row>
       <!-- 表格区域 -->
       <el-table :data="goodslist" border stripe>
         <el-table-column type="index"></el-table-column>
         <el-table-column label="商品名称" prop="goods_name"></el-table-column>
         <el-table-column label="商品价格（元）" prop="goods_price" width="95px"></el-table-column>
         <el-table-column label="商品重量" prop="goods_weight" width="70px"></el-table-column>
         <el-table-column label="商品数量" prop="goods_number" width="70px"></el-table-column>
         <el-table-column label="创建时间" prop="add_time" width="140px">
           <template v-slot="scope">
             {{scope.row.add_time | dateFormat}}
           </template>
         </el-table-column>
         <el-table-column label="操作" width="130px">
           <template v-slot="scope">
             <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.goods_id)"></el-button>
             <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeById(scope.row.goods_id)"></el-button>
           </template>
         </el-table-column>
       </el-table>
       <!-- 分类区域 -->
       <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
       :current-page="queryInfo.pagenum" :page-sizes="[5,10,15,20]" :page-size="queryInfo.pagenum"
       layout="toal,sizes,prev,pager,next,jumper" :total="total" background>
       </el-pagination>
     </el-card>
     <!-- 修改商品的对话框 -->
     <el-dialog title="修改商品" :visible.sync="editDialogVisible" width="50%">
       <el-form :model="editForm" ref="editFormRef">
         <el-form-item label="商品名称" prop="goods_name">
           <el-input v-model="editForm.goods_name"></el-input>
         </el-form-item>
         <el-form-item label="商品价格" prop="goods_price">
           <el-input v-model="editForm.goods_price"></el-input>
         </el-form-item>
         <el-form-item label="商品数量" prop="goods_number">
           <el-input v-model="editForm.goods_number"></el-input>
         </el-form-item>
         <el-form-item label="商品重量" prop="goods_weight">
           <el-input v-model="editForm.goods_weight"></el-input>
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button @click="editDialogVisible = false">取消</el-button>
         <el-button @click="editGoods">确定</el-button>
       </span>
     </el-dialog>
   </div>
</template>

<script>
export default {
   data () {
      return {
        // 查询参数对象
        queryInfo: {
          query: '',
          pagenum: 1,
          pagesize: 10
        },
        // 商品列表
        goodslist: [],
        // 总数据条数
        total: 0,
        editDialogVisible: false,
        editForm: {}
      };
   },
   created(){
     this.getGoodsList()
   },
   components: {},

   methods: {
     async getGoodsList() {
       const {data: res } = await this.$http.get('goods',{ params: this.queryInfo })
       if(res.meta.status !== 200) {
         return this.$message.error('获取商品列表失败')
       }
       this.goodslist = res.data.goods
       this.total = res.data.total
       this.$message.success('获取商品列表成功')
     },
     handleSizeChange(newSize) {
       this.queryInfo.pagesize = newSize
       this.getGoodsList()
     },
     handleCurrentChange(newPage) {
       this.queryInfo.pagenum = newPage
       this.getGoodsList()
     },
     async removeById(id) {
       const confirmResult = await this.$confirm('此操作将永久删除该商品','是否继续？', '提示',{
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).catch(err => err)
       if(confirmResult !== 'confirm'){
         return this.$message.info('已取消删除')
       }
       const {data: res} = this.$http.delete(`goods/${id}`)
       if(res.meta.status !== 200) {
         return this.$message.error('删除失败')
       }
       this.$message.success('删除成功')
       this.getGoodsList()
     },
     addGood() {
       this.$router.push('/goods/add')
     },
     async showEditDialog(id) {
       const { data: res } = await this.$http.get(`goods/${id}`)
       if(res.meta.status !== 200) {
         return this.$message.error('获取商品信息失败')
       }
       this.editForm = res.data
       this.$message.success('获取商品信息成功')
       this.editDialogVisible = true
     },
     editGoods() {
       this.$refs.editFormRef.validate(async valid => {
         if(!valid) return
         const {data: res} = await this.$http.put(`goods/${this.editForm.goods_id}`, {
           params: {
             goods_name: this.editForm.goods_name,
             goods_number: this.editForm.goods_number,
             goods_price: this.editForm.goods_price,
             goods_weight: this.editForm.goods_weight,
             goods_introduce: '',
             pics: {},
             attrs: []
           }
         })
         if(res.meta.status !== 200) {
           return this.$message.error('修改商品数据失败')
         }
          this.$message.success('修改商品数据成功')
          this.getGoodsList()
       })
     }
   }
}
</script>
<style lang='less' scoped>

</style>